<template>
  <div class="dialog" v-show="defaultValue">
  	<div class="d-content">
  		<p>{{message}}</p>
  		<span @click="onConfirm" class="confirm-btn">确认</span>
  	</div>
  </div>
</template>
<script>
  export default {
  		data() {
		    return {
		      defaultValue: (typeof this.value) === 'Object' ? JSON.parse(JSON.stringify(this.value)) : this.value
		    }
		  },
		  model:{
		  	prop:'value',
		  	event:'change'
		  },
		  props: {
		     value: {
			      type: Boolean,
			      default: false,
			},
			message:{
				type:String,
				default:''
			}
		  },
		   watch: {
		    value(newVal, oldVal) {
		      this.defaultValue = newVal;
		    },
		    defaultValue(newVal, oldVal) {
		      this.$emit('change', newVal);
		    },
		  },
		  methods:{
		  	onConfirm(){
		  		this.$emit('onConfirm')
		  	}
		  }

  }
</script>
<style scoped>
.dialog{
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.6);
	width: 100%;
	text-align: center;
	height: 100%;
}
.d-content{
  border-radius: .45rem;
  width: 86%;
  height: 4.98rem;
	padding: .45rem 0 .6rem 0;
	position: absolute;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	left: 50%;
	top: 50%;
	color:#fff;
	text-align: center;
	background: #fff url(../assets/images/bg-dialog-confirm.png) 0 top no-repeat;
	background-size: 100% 2.12rem;
}
.d-content p{
	line-height: .45rem;
	font-size: .26rem;
    padding: 0 22% 1.9rem;
}
.confirm-btn{
	font-size: .36rem;
  background: #F7BE37;
  line-height: .9rem;
  border-radius: 99px;
  padding:0 10%;
  display: inline-block;

}
</style>
